import React, { Component } from 'react';
import { SubjectListContainer } from './subject.style'
import common from 'assets/icon/common.png'
import {withRouter} from 'react-router-dom'
@withRouter
class subjsctList extends Component {

    constructor() {
        super()
        this.state = {
            
        }
    }
    clickHandler(val){
        this.props.history.push('/tesla')
        val = JSON.stringify(val)
        localStorage.setItem('tesla',val)
    }

    render() {
        return (
            <SubjectListContainer>
                {
                    this.props.array.map((item, index) => {
                        return (
                            <div className="container" key={index}>
                                <div className="tit" key={index}>{item.categoryName}</div>
                                <ul>
                                    {
                                        item.dataList.map((val, ind) => {
                                            return (
                                                <li onClick={()=>this.clickHandler(val)} key={ind}>
                                                    <div className="img">
                                                        <img src={`${val.topicIcon}`} />
                                                    </div>
                                                    <div className="right">
                                                        <h5>{val.topicName}</h5>
                                                        <div className="common">
                                                            <span><img src={common} /></span>
                                                                    &nbsp;
                                                            <i>{val.topicFollowCount}</i>
                                                        </div>
                                                    </div>
                                                </li>
                                            )

                                        })
                                    }

                                </ul>
                            </div>
                        )
                    })
                }
            </SubjectListContainer>
        );
    }
}

export default subjsctList;